<template>
	<view>
		<u-upload ref="uUpload" 
			:action="action" 
			:file-list="ffList" 
			:show-progress="false"
			:before-upload="beforeUpload"
			:max-count="count" 
			@on-success="onSucess" 
			@on-progress="onProgress" 
			@on-remove="onRemove" 
			:width="width" 
			:height="height" 
			:custom-btn="custombtn"
			:multiple="multiple"
			max-size="10*1024*1024"	
		>
			<view v-if="custom==1" slot="addBtn" class="slot-btn" hover-stay-time="150">
				<u-icon name="camera" size="80" color="#c0c4cc"></u-icon>
			</view>
			<view v-if="custom==2" slot="addBtn" class="slot-btn" hover-stay-time="150">
				<image src="/static/image/icon/add.png"  mode=""></image>
			</view>
			
			
		</u-upload>
	</view>
</template>

<script>
	
	if(getApp().globalData.dev){
		var baseUrl=getApp().globalData.api_url_dev
	}else{
		var baseUrl=getApp().globalData.api_url_prod
	}
	
	const uploadPath = baseUrl+'common/upload'
	
	export default {
		data() {
			return {
				action: uploadPath,
				imgList: [],
				ffList: [],
				custombtn:false,
			}
		},
		props: {
			fileList: {
				type: Array,
				default: function() {
					return []
				}
			},
			count: {
				type: Number,
				default: 10
			},
			custom:{
				type: Number,
				default: 0
			},
			multiple:{
				type: Boolean,
				default: true
			},
			width: {
				type: String,
				default: '150rpx'
			},
			height: {
				type: String,
				default: '150rpx'
			}
		},

		created() {
			if (this.fileList) {
				this.fileList.map((item, index) => {
					this.ffList.push({
						url: item
					})
					this.imgList.push(item)
				})
			}
			if(this.custom==1){
				this.custombtn=true
			}else if(this.custom==2){
				this.custombtn=true
			}else if(this.custom==3){
				this.custombtn=true
			}
		},
		methods: {
			onProgress(res, index, lists, name) {

				uni.showLoading({
					title:'上传中',
				})
			},
			onSucess(data, index, lists, name) {
				this.imgList.push(data.data.fullurl)
				this.$emit('get_imgs', this.imgList)
			},
			onRemove(index, lists, name) {
				this.imgList.splice(index, 1)
				this.$emit('get_imgs', this.imgList);
			},
			// 上传前函数
			beforeUpload (index,list) {
				 
				let _this=this
				// #ifdef H5
				// 压缩图片
				return _this.compressImg(list[index].file).then(res => {
					// 替换压缩后的到上传列表
					_this.$refs.uUpload.lists.forEach((item, index) => {
						
						// 匹配具体的文件，然后替换
						if (item.file.name == res.name) {
							
							_this.$refs.uUpload.lists[index].file = res;
							_this.$refs.uUpload.lists[index].url = res.path;
						
						}
					})
				})
				// #endif
			},
			
			// 压缩图片
			compressImg(file) {
				return new Promise((resolve, reject) => {
					let reader = new FileReader();
					reader.onloadend = function(e) {
						let img = new Image();
						img.onload = function() {
							let canvasWidth = img.width // 图片原始长宽
							let canvasHeight = img.height
							let canvas = document.createElement('canvas');
							let ctx = canvas.getContext('2d');
							// 创建固定750宽度的图片，可自定义大小
							canvas.width = 750;
							canvas.height = (750 * canvasHeight) / canvasWidth;
							ctx.drawImage(img, 0, 0, 750, (750 * canvasHeight) / canvasWidth);
							canvas.toBlob(
								function(blob) {
									// 创建file文件
									let pressFile = new File([blob], file.name, {
										type: file.type
									})
									Object.defineProperty(pressFile, 'path', {
										get: () => URL.createObjectURL(blob)
									})
									return resolve(pressFile)
								},
								file.type,
								0.8 
							);
						};
						img.src = e.target.result;
					};
					reader.readAsDataURL(file);
				})
			},


			
		}
	}
</script>

<style lang="scss" scoped>
	.slot-btn {
		width: 150rpx;
		height: 150rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 10rpx;
		border:1px solid #e2e2e2;
		image{
			width: 80rpx;
			height: 80rpx;
		}
		
	}
	.img{
		width: 702rpx;
		height: 350rpx;
		display: flex;
		flex-direction: column;
		padding: 91rpx 286rpx 84rpx 286rpx;
		border:2rpx dotted #dddddd;
		
		image{
			width: 130rpx;
			height: 130rpx;
		}
		.img-title{
			font-size: 22rpx;
			color: #999999;
			margin: 22rpx 0 0 -8rpx;
			width: 170rpx;
		}
	}
	
	
</style>
